<!--
 * @Author: liguigong liguigong@shopline.com
 * @Date: 2025-09-26 19:17:18
 * @LastEditors: liguigong liguigong@shopline.com
 * @LastEditTime: 2025-09-28 16:22:27
 * @FilePath: pages/fittingRoom/components/Clothespic.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <view class="clothes-box">
    <view v-for="item in fittingRoomStore.currentClothes" class="clothes-pic">
      <image :src="item.fileUrl" class="pic" mode="aspectFill"></image>
    </view>
    <view class="btn" @click="tryItOn">试穿</view>
  </view>
</template>
<script setup>
  import sheep from '@/sheep';
  import {watch} from 'vue'

  const fittingRoomStore = sheep.$store('fittingRoom');
  function tryItOn() {
    fittingRoomStore.tryOn();
  }

</script>
<style lang="scss" scoped>
  .clothes-box {
    position: absolute;
    top: 50rpx;
    height: 600rpx;
    right: 30rpx;
    overflow: hidden;
    width: 120rpx;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .clothes-pic {
    width: 120rpx;
    height: 180rpx;
    overflow: hidden;
    margin-bottom: 16rpx;
  }
  .pic {
    width: 100%;
    height: 100%;
  }
  .btn {
    height: 48rpx;
    background: #000;
    color: #fff;
    font-size: 24rpx;
    line-height: 48rpx;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
